<template>
  <view class="favorites-container">
    <view class="tab-header">
      <view class="custom-tabs">
        <view 
          v-for="tab in tabs" 
          :key="tab.value"
          :class="['tab-item', activeTab === tab.value ? 'active' : '']"
          @tap="activeTab = tab.value"
        >
          {{ tab.label }}
        </view>
      </view>
    </view>

    <!-- 商品收藏 -->
    <view v-if="activeTab === 'products'" class="product-list">
      <view class="row">
        <view 
          v-for="item in favoriteProducts" 
          :key="item.id"
          class="col-6"
        >
          <view class="product-card animate__animated animate__fadeIn">
            <image 
              :src="url('sp', item.image, 'png')"
              mode="aspectFill"
              class="product-image"
              @tap="navigateToDetail(item.id)"
            />
            <view class="product-info">
              <text class="product-name">{{ item.name }}</text>
              <text class="product-price">¥{{ item.price }}</text>
              <view class="actions">
                <button class="btn-unfavorite" @tap="removeFavorite(item)">
                  <text class="bi bi-heart-fill"></text>
                </button>
                <button class="btn-cart" @tap="addToCart(item)">
                  <text class="bi bi-cart-plus"></text>
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>


    <!-- 书籍收藏 -->
    <view v-else class="books-list">
      <view 
        v-for="book in favoriteBooks" 
        :key="book.id"
        class="book-item animate__animated animate__fadeIn"
        @tap="navigateToBook(book.id)"
      >
        <image 
          :src="url('b', book.image, 'png')"
          mode="aspectFill"
          class="book-image"
        />
        <view class="book-info">
          <text class="book-title">{{ book.title }}</text>
          <text class="book-desc">{{ book.content }}</text>
          <view class="book-meta">
            <text class="author">{{ book.author }}</text>
            <button class="btn-unfavorite" @tap.stop="removeBookFavorite(book)">
              <text class="bi bi-heart-fill"></text>
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const url = $url
const activeTab = ref('products')

const favoriteProducts = ref([
  {
    id: 1,
    name: '墨枢笔记本',
    image: '0',
    price: 39.90
  },
  {
    id: 2,
    name: '墨枢项链系列',
    image: '1',
    price: 99.90
  },
  {
    id: 3,
    name: '墨枢纪念币',
    image: '2',
    price: 199.90
  }
])



const favoriteBooks = ref([
  {
    id: 1,
    title: '梦溪笔谈',
    content: '是百科全书式的著作，尤以其科学技术价值闻名于世。该书在国际亦受重视，英国科学史家李约瑟评价为"中国科学史上的里程碑"。',
    author: '沈括',
    image: '0'
  },
  {
    id: 2,
    title: '天工开物',
    content: '是中国古代一部综合性的科学技术著作，本书初刊于1637年（明崇祯十年），作者是明朝发明家宋应星。',
    author: '宋应星',
    image: '1'
  },
  {
    id: 3,
    title: '论衡',
    content: '是东汉思想家王充所著的唯物主义哲学巨著，全书共八十五篇（今存八十四篇），以"疾虚妄"为宗旨，系统批判了汉代盛行的谶纬神学、天人感应等迷信思想。',
    author: '王充',
    image: '5'
  }
])

const tabs = [
  { value: 'products', label: '商品' },

  { value: 'books', label: '书籍' }
]

const navigateToDetail = (id) => {
  uni.navigateTo({
    url: `/pages/shop/detail?id=${id}`
  })
}



const navigateToBook = (id) => {
  uni.navigateTo({
    url: `/pages/other/physicsBook/detail?id=${id}`
  })
}

const removeFavorite = (item) => {
  uni.showModal({
    title: '提示',
    content: '确定要取消收藏该商品吗？',
    success: (res) => {
      if (res.confirm) {
        // 实现取消收藏逻辑
        uni.showToast({
          title: '已取消收藏',
          icon: 'success'
        })
      }
    }
  })
}


const removeBookFavorite = (book) => {
  uni.showModal({
    title: '提示',
    content: '确定要取消收藏该书籍吗？',
    success: (res) => {
      if (res.confirm) {
        // 实现取消收藏逻辑
        uni.showToast({
          title: '已取消收藏',
          icon: 'success'
        })
      }
    }
  })
}

const addToCart = (item) => {
  // 实现加入购物车逻辑
  uni.showToast({
    title: '已加入购物车',
    icon: 'success'
  })
}
</script>

<style lang="scss" scoped>
.favorites-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 30rpx;
}

.tab-header {
  background: #fff;
  padding: 20rpx;
  position: sticky;
  top: 0;
  z-index: 100;
}

.product-list {
  padding: 20rpx;
}

.product-card {
  margin: 10rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.product-image {
  width: 100%;
  height: 300rpx;
}

.product-info {
  padding: 20rpx;
}

.product-name {
  font-size: 28rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  color: #ff4d4f;
  font-size: 32rpx;
  font-weight: bold;
  margin: 10rpx 0;
}

.actions {
  display: flex;
  justify-content: space-between;
}

.btn-unfavorite,
.btn-cart {
  margin: 0;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  line-height: 1;
}

.btn-unfavorite {
  color: #ff4d4f;
  background: #fff;
  border: 2rpx solid #ff4d4f;
}

.btn-cart {
  background: var(--td-brand-color);
  color: #fff;
  border: none;
}

.article-list,
.books-list {
  padding: 20rpx;
}

.article-item,
.book-item {
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.article-image,
.book-image {
  width: 100%;
  height: 300rpx;
}

.article-info,
.book-info {
  padding: 20rpx;
}

.article-title,
.book-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.article-desc,
.book-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-meta,
.book-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}

.custom-tabs {
  display: flex;
  background: #fff;
  border-radius: 8rpx;
  padding: 4rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
  
  &.active {
    color: var(--td-brand-color);
    font-weight: bold;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 40rpx;
      height: 4rpx;
      background: var(--td-brand-color);
      border-radius: 2rpx;
    }
  }
}
</style> 